<template>
  <div class="shade" @click.self="close" ref="shade" v-if="value">
    <transition appear name="inner">
      <div class="box">
        <p v-for="item in list">{{item}}</p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'ActionSheet',
  data() {
    return {
    }
  },
  props: ["value","list"],
  methods: {
    close() {
      console.log("关闭");
      this.$emit("input",false);
    }
  }
};
</script>

<style scoped>
.shade {
  position: fixed;
  width: 100%;
  height: 100%;
  bottom: 0;
  background-color: #00000096;
}

.box {
  width: 100%;
  height: 110px;
  background-color: #ffffff;
  position: absolute;
  bottom: 0;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

p{
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

.inner-enter,
.inner-leave-to {
  height: 0px;
}

.inner-enter-active,
.inner-leave-active {
  transition: all 1s;
}

.inner-enter-to,
.inner-leave {
  height: 110px;
}

</style>